<template>
    <view :class='$style.nav'>
        <view :style='{paddingTop : paddingTop + "px", paddingRight : paddingRight + "px"}'>
            <view :class='$style.navWrap' :style='{height: height + "px"}'><slot></slot></view>
        </view>
    </view>
</template>

<script lang='ts' setup>
    import { getMenuButtonBoundingClientRect, getStorageSync, getSystemInfoSync, setStorage } from '@/utils/framework';

    const key = process.env.B_DEVICE_INFO as string


    let deviceInfo:any = getStorageSync(key)
    if(!deviceInfo) {
        deviceInfo = {}
        deviceInfo.menuButtonBoundingClientRect = getMenuButtonBoundingClientRect()
        deviceInfo.systemInfo = getSystemInfoSync()

        setStorage(key, deviceInfo)
    }

    const paddingTop = deviceInfo.menuButtonBoundingClientRect.top
    const height = deviceInfo.menuButtonBoundingClientRect.height
    const paddingRight = deviceInfo.systemInfo.windowWidth - deviceInfo.menuButtonBoundingClientRect.left
</script>

<style lang="scss" module>
    .nav{
        padding-left: 34px;
        padding-bottom: 12px;
    }


    .navWrap{
        position: relative;
        display: flex;
        align-items: center;
    }
</style>